<%= add_on_layout(@add_on) do %>
  <%= turbo_frame_tag "metrics", data: { controller: "refresh-turbo-frame", "refresh-turbo-frame-frequency-value": 30000 } do %>
    <%= render(
      "shared/partials/async_renderer",
      view_model: Async::AddOns::Metrics::ShowViewModel.new(
        current_user,
        add_on_id: @add_on.id
      )
    ) %>
  <% end %>

  <%= turbo_frame_tag "charts" do %>
    <div class="mt-8">
      <% metric_display = params[:metric_display] || "percentage" %>  
      <%= render "clusters/metrics/search", search_path: add_on_metrics_path(@add_on), metric_display: %>

      <div class="flex flex-row gap-4 mt-8">
        <%= render(
          "shared/charts/chart",
          config: {
            title: "CPU Usage",
            metric_display:,
            metric_type: "cpu",
            data: NamespaceMetricsHelper.parse_cpu_metrics(@metrics)
          },
        ) %>

        <%= render(
          "shared/charts/chart",
          config: {
            title: "Memory Usage",
            metric_display:,
            metric_type: "memory",
            data: NamespaceMetricsHelper.parse_memory_metrics(@metrics)
          },
        ) %>
      </div>
    </div>
  <% end %>
<% end %>
